<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart-canvas" :style="{ height: chartHeight }"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  chartConfig: {
    type: Object,
    required: true
  },
  data: {
    type: Array,
    default: () => []
  }
})

const chartRef = ref(null)
const chartInstance = ref(null)
const chartHeight = ref('300px')

// 根据图表类型设置高度
const setChartHeight = () => {
  if (props.chartConfig.type === 'table') {
    chartHeight.value = '200px'
  } else if (props.chartConfig.type === 'pie') {
    chartHeight.value = '300px'
  } else {
    chartHeight.value = '300px'
  }
}

// 生成图表配置
const generateChartOption = () => {
  const { type, title } = props.chartConfig
  
  if (type === 'table') {
    return generateTableOption()
  } else if (type === 'bar') {
    return generateBarOption()
  } else if (type === 'line') {
    return generateLineOption()
  } else if (type === 'pie') {
    return generatePieOption()
  } else {
    return generateDefaultOption()
  }
}

// 生成表格配置
const generateTableOption = () => {
  if (!props.data || props.data.length === 0) {
    return {
      title: { text: '暂无数据' },
      series: []
    }
  }
  
  const columns = Object.keys(props.data[0])
  const rows = props.data.map(item => columns.map(col => item[col]))
  
  return {
    title: { text: props.chartConfig.title || '数据表格' },
    tooltip: { trigger: 'axis' },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', data: columns },
    yAxis: { type: 'value' },
    series: [{
      type: 'bar',
      data: rows[0] || [],
      label: { show: true, position: 'top' }
    }]
  }
}

// 生成柱状图配置
const generateBarOption = () => {
  if (!props.data || props.data.length === 0) {
    return {
      title: { text: '暂无数据' },
      series: []
    }
  }
  
  const xAxisData = props.data.map(item => item.name || item.id)
  const seriesData = props.data.map(item => item.value || item.count || 0)
  
  return {
    title: { text: props.chartConfig.title || '柱状图' },
    tooltip: { trigger: 'axis' },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { 
      type: 'category', 
      data: xAxisData,
      axisLabel: { rotate: 45 }
    },
    yAxis: { type: 'value' },
    series: [{
      type: 'bar',
      data: seriesData,
      itemStyle: {
        color: '#409EFF'
      },
      label: { show: true, position: 'top' }
    }]
  }
}

// 生成折线图配置
const generateLineOption = () => {
  if (!props.data || props.data.length === 0) {
    return {
      title: { text: '暂无数据' },
      series: []
    }
  }
  
  const xAxisData = props.data.map(item => item.name || item.id)
  const seriesData = props.data.map(item => item.value || item.count || 0)
  
  return {
    title: { text: props.chartConfig.title || '折线图' },
    tooltip: { trigger: 'axis' },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { 
      type: 'category', 
      data: xAxisData,
      axisLabel: { rotate: 45 }
    },
    yAxis: { type: 'value' },
    series: [{
      type: 'line',
      data: seriesData,
      smooth: true,
      itemStyle: {
        color: '#67C23A'
      },
      lineStyle: {
        color: '#67C23A',
        width: 3
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
            { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
          ]
        }
      }
    }]
  }
}

// 生成饼图配置
const generatePieOption = () => {
  if (!props.data || props.data.length === 0) {
    return {
      title: { text: '暂无数据' },
      series: []
    }
  }
  
  const pieData = props.data.map(item => ({
    name: item.name || item.id,
    value: item.value || item.count || 0
  }))
  
  return {
    title: { text: props.chartConfig.title || '饼图' },
    tooltip: { trigger: 'item' },
    legend: { orient: 'vertical', left: 'left' },
    series: [{
      type: 'pie',
      radius: '50%',
      data: pieData,
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
}

// 生成默认配置
const generateDefaultOption = () => {
  return {
    title: { text: '图表' },
    tooltip: { trigger: 'axis' },
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    xAxis: { type: 'category', data: [] },
    yAxis: { type: 'value' },
    series: []
  }
}

// 初始化图表
const initChart = async () => {
  if (!chartRef.value) return
  
  await nextTick()
  
  if (chartInstance.value) {
    chartInstance.value.dispose()
  }
  
  chartInstance.value = echarts.init(chartRef.value)
  const option = generateChartOption()
  chartInstance.value.setOption(option)
}

// 监听数据变化
watch(() => [props.chartConfig, props.data], () => {
  setChartHeight()
  initChart()
}, { deep: true })

// 监听窗口大小变化
const handleResize = () => {
  if (chartInstance.value) {
    chartInstance.value.resize()
  }
}

onMounted(() => {
  setChartHeight()
  initChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  if (chartInstance.value) {
    chartInstance.value.dispose()
  }
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.chart-container {
  width: 100%;
  overflow: hidden;
}

.chart-canvas {
  width: 100%;
  min-height: 200px;
}
</style>




